import { memo, useEffect, useState } from 'react'
import { Typography, Space } from 'antd'
import { EditOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import styles from './index.module.scss'
import useGetUserInfo from '@/hooks/useGetUserInfo'
import { getToken } from '@/utils/user-token'
import { MANAGE_INDEX_PATHNAME } from '@/router'

const { Title } = Typography
const Logo = memo(() => {
  const { username } = useGetUserInfo()
  const token = getToken()
  const [pathname, setPathname] = useState('/')

  useEffect(() => {
    console.log(token, username)
    if (username && token) {
      setPathname(MANAGE_INDEX_PATHNAME)
    }
  }, [username, token])

  return (
    <div className={styles.container}>
      <Link to={pathname}>
        <Space>
          <Title>
            <EditOutlined />
          </Title>
          <Title>小慕问卷</Title>
        </Space>
      </Link>
    </div>
  )
})

export default Logo
